/*
 * @Author: Leo Zhang（张吉军）
 * @Description:
 * @需求文档：
 * 高保真：
 * API：
 */

import React, { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import { Input, Select, Carousel, Card, Spin } from 'antd';
import { useNavigate, useLocation } from 'react-router-dom';
import moment from 'moment';
import { CustomerApi } from '@/src/api/strapi';
import baseService from '@service/baseService';
// import carousel1 from '@assets/jinbang.jpg';
// import backBgUrl from '@assets/back-bg.png';
import logoUrl from '@assets/logo.jpg';
import fireUrl from '@assets/fire.png';
import testUrl from '@assets/test.png';
import app from "../../constant/index";

const { Search } = Input;

import styles from './style.module.less';
interface Iprops {}

const Home = (props: Iprops) => {
  const [activeTab, setActiveTab] = useState(0);
  const [hotModule, setHotModule] = useState([]);
  const [allSubjectInfo, setAllSubjectInfo] = useState([]);
  const navigate = useNavigate();
  const [courseList, setCourseList] = useState<any>([]);
  const [searchTxt, setSearchTxt] = useState('');
  const [searchPageList, setSearchPageList] = useState([]);
  const [pageLoading, setPageLoading] = useState(false);
  const { state } = useLocation();

  useEffect(() => {
    handleSubjectList();
  }, []);

  useEffect(() => {
    setPageLoading(true);
    try {
      baseService
        .get(`/edu/subject/file/page?title=${state?.keyWord}`)
        .then((res: any) => {
          if (res.code == 0) {
            setSearchPageList(res?.data?.list);
          }
        })
        .finally(() => {
          setPageLoading(false);
        });
    } catch (error) {}
  }, [state?.keyWord]);

  const handlePathstr = (path: any) => {
    return path?.replace(
      'https://edu-platform-file.oss-cn-hangzhou.aliyuncs.com',
      '/mine'
    );
  };

  const handleSubjectList = async () => {
    try {
      baseService.get('/edu/subject/list').then((res: any) => {
        console.log('🚀 ~ handleSubjectList ~ res:', res);
        if (res.code == 0) {
          setCourseList(res.data);
        }
      });
    } catch (error) {
      console.log('jj-error', error);
    }
  };

  const handleTabClick = (nav: any, idx: any) => {
    if (nav.name == '首页') {
      navigate('/subjectRecommad');
      return;
    }
    navigate(`/subjectList?name=${nav.name}&idx=${idx}`);
  };

  const onChange = (e: any) => {
    setSearchTxt(e?.target?.value);
  };

  const onSearch = (value: any) => {
    baseService
      .get(`/edu/subject/file/page?title=${searchTxt}`)
      .then((res: any) => {
        if (res.code == 0) {
          setSearchPageList(res?.data?.list);
        }
      });
  };

  const viewDetail = (item: any) => {
    const videoUrl = `${handlePathstr(item?.fileUrl)}`;
    navigate('/acticleDetail', { state: { item,  videoUrl } });
  };

  return (
    <div className={styles.wrapper}>
      {/* <div className={styles.searchBar}>
        <img src={logoUrl} alt="" className={styles.logo} />
        <Search
          placeholder="请输入关键字"
          enterButton="搜索"
          size="large"
          onSearch={onSearch}
          className={styles.searchInput}
          onChange={onChange}
          style={{ width: '600px', marginLeft: '100px' }}
        />
      </div>
      <div className={styles.navWrapper}>
        <div className={styles.narMenu}>
          {[{ id: -1, name: '首页' }, ...courseList]?.map((nav, idx) => {
            return (
              <div
                onClick={() => handleTabClick(nav, idx)}
                className={`${styles.narItem} ${
                  activeTab === idx ? styles.narItemActive : ''
                }`}
              >
                {nav.name}
              </div>
            );
          })}
        </div>
      </div> */}
      <div className={styles.searchSourceList}>
        {searchPageList?.map((sub: any, idx: any) => {
          return (
            <div className={styles.record} onClick={() => viewDetail(sub)}>
              <img src={testUrl} className={styles.testIcon} />
              <span className={styles.testTxt}>{sub.title}</span>
              <span className={styles.time}>
                [{moment(sub.createDate).format('YYYY-MM-DD')}]
              </span>
            </div>
          );
        })}
      </div>
      <div className={styles.footer_bg}>
        {/* <img src={logoUrl} alt="" className={styles.logo} /> */}
        <section className={styles.footer_section}>
          <p>{app.name} ©2024 版权所有 备案号：< a href="https://beian.miit.gov.cn" target="_blank">苏ICP备2024130913号</a ></p>
        </section>
      </div>

      <Spin size="large" spinning={pageLoading} fullscreen />
    </div>
  );
};

export default Home;
